<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Install 安装向导</title>
    <link href="static/css/bootstrap-icons.css" rel="stylesheet">
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html {
            color: #333;
            font-size: 14px;
        }

        i {
            border-radius: 50%;
            font-style: normal;
            background-color: #090;
            color: #FFF;
            padding: 5px 15px;
            display: inline-block;
            margin-right: 15px
        }

        input {
            color: #555
        }
    </style>
</head>

<body>
    <div id="app" class="d-flex flex-column">
        <header>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">Admin 安装向导</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                </div>
            </nav>
        </header>
        <main class="flex-grow-1 border-top border-bottom border-primary border-2">
            <div class="my-1" style="height:calc(100vh - 125px); overflow-y: auto; padding-top:150px;">
                <h1 class="text-success my-5 text-center"><i>&radic;</i>恭喜您，安装成功！</h1>
                <div style="display: table; margin:0 auto">
                    <h5 class="mb-4">您的管理员信息</h5>
                    <table class="table table-sm table-borderless">
                        <tr>
                            <td>账号：</td>
                            <td><input class="form-control form-control-sm" type="text" :value="dbcfg.admin_account"
                                    readonly /></td>
                        </tr>
                        <tr>
                            <td>密码：</td>
                            <td>
                                <div class="input-group input-group-sm">
                                    <input class="form-control" :type="showPassword ? 'text' : 'password'"
                                        :value="dbcfg.admin_password" readonly />
                                    <button class="btn btn-secondary" @click="showPassword=!showPassword">显示</button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td class="pt-4">
                                <button class="btn btn-sm btn-secondary me-2" @click="onSave()">保存</button>
                                <button class="btn btn-sm btn-outline-secondary" @click="onCopy()">复制</button>
                            </td>
                        </tr>
                    </table>
                    <h5 class="mt-4 pt-3">现在您可以访问</h5>
                    <div class="mt-4">
                        <a class="btn btn-primary me-4" href="/" target="_blank">网站前台</a>
                        <a class="btn btn-secondary" href="/admin/" target="_blank">网站后台</a>
                    </div>
                </div>
            </div>
        </main>
        <footer class="d-flex justify-content-between my-3">
            <div class="copyright mt-2">© 2021 <a href="https://gitee.com/sochishun/tvadmin" target="_blank"
                    class="text-reset">TvAdmin</a></div>
        </footer>
    </div>
    <script src="static/js/bootstrap.bundle.min.js"></script>
    <script src="static/js/vue.global.prod.min.js"></script>
    <script src="static/js/axios.min.js"></script>
    <script src="static/js/vui365.js"></script>
    <script>
        // 应用配置
        const App = {
            data() {
                return {
                    dbcfg: {
                        admin_account: '',
                        admin_password: '',
                    },
                    showPassword: false,
                }
            },
            methods: {
                onCopy() {
                    let text = '账号: ' + this.dbcfg.admin_account + "  \n密码: " + this.dbcfg.admin_password;
                    navigator.clipboard.writeText(text);
                    alert('复制成功');
                },
                onSave() {
                    let text = '账号: ' + this.dbcfg.admin_account + "  \n密码: " + this.dbcfg.admin_password; 
                    var blob = new Blob([text], { type: "text/plain" });
                    var anchor = document.createElement("a");
                    anchor.download = "管理后台的账号.txt";
                    anchor.href = window.URL.createObjectURL(blob);
                    anchor.target = "_blank";
                    anchor.style.display = "none"; // just to be safe! 
                    document.body.appendChild(anchor);
                    anchor.click();
                    document.body.removeChild(anchor);
                }
            },
            mounted() {

                // 移除骨架屏
                document.querySelectorAll('.skeleton').forEach(el => {
                    el.classList.remove("skeleton");
                })
                let text = this.dbcfg = window.sessionStorage.getItem("dbcfg");
                if (text) {
                    try {
                        this.dbcfg = JSON.parse(text);
                    } catch (error) {
                        console.log('解析 JSON 数据错误:', error);

                    }
                }
            },
            beforeDestroy() {
                window.sessionStorage.removeItem('dbcfg');
            }
        }
        // 创建应用实例
        const app = Vue.createApp(App)
        const vm = app.mount('#app')
    </script>
</body>

</html>